<template>
	<view class="mySynthesis">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="mySynthesis-main">
			<view class="mySyn-ul">
				<view class="u-page__item">
					<u-collapse
						@change="foldChange"
						@close="foldClose"	 
						@open="foldOpen"		
						:border="false"
						:value="['1']"
					>
						<u-collapse-item
							name="1"
							class="mySynthesis_bg"
							v-for="item,index in list" :key="index"
						>
							<view slot="title" class="u-page__item__title__slot-title mySyn-ul-box">
								<image class="mySyn-ul-box-img" :src="item.cardImg" mode=""></image>
								<view class="mySyn-ul-box-wenzi">
									<view class="mySyn-ul-box-wenzi-t single-line"><text>{{item.cardName}}</text></view>
									<view class="mySyn-ul-box-wenzi-b"><text>介绍：{{item.cardDesc}}</text></view>
								</view>
							</view>
							<view class="u-collapse-content">
								<view class="mySyn-ul-li-title"><text>所需藏品</text></view>
								<view class="mySyn-ul-li" v-for="itm,idx in item.cardItemInfoList" :key="idx">
									<view class="mySyn-ul-li-box">
										<image class="mySyn-ul-li-img" :src="itm.img" mode="" @click="toDetail(itm)"></image>
										<view class="mySyn-ul-li-wenzi" @click="toDetail(itm)">
											<view class="mySyn-ul-li-wenzi-t single-line"><text>{{itm.name}}</text></view>
											<view class="mySyn-ul-li-wenzi-b"><text>所需数量：{{itm.collectionNum}}</text></view>
										</view>
										<view class="mySyn-ul-li-select">
											<text class="mySyn-ul-li-select-null" v-if="itm.isEnabled != 1">暂无</text>
											<image class="mySyn-ul-li-select-more" v-else src="@/static/img/select-icon.png" mode=""></image>
										</view>
									</view>
								</view>
								<view class="mySyn-ul-li-anniu" @click="synthesisCollection(item)"><view class="mySyn-ul-li-anniu-btn" :class="item.isEnabled != 1?'btn_wu':''"><text>确认合成</text></view></view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
		
		
		<!-- 弹窗 -->
		<u-popup :show="successShow" :round="20" mode="center" :overlayOpacity="0.8" @close="successPopupClose" @open="successPopupOpen" bgColor="transparent">
			<view class="flodPopup">
				<view class="tipsPopup-icon">
					<image class="tipsPopup-icon-img" src="../../static/img/success-icon.png" mode=""></image>
				</view>
				<view class="tipsPopup-text"><text>合成成功</text></view>
				<view class="tipsPopup-confirm" @click="confirmOk"><text>知道啦</text></view>
				<image class="cancel-icon" @click="successShow = false" src="../../static/img/cancel-icon.png" mode=""></image>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'藏品合成',
				successShow:false,
				list:[],
				synthesisCollectionFlag:true,
			};
		},
		onLoad() {
			this.getCardList();
		},
		methods:{
			foldChange(e){
				// console.log('change',e)
			},
			foldClose(e){
				// console.log('close',e)
			},
			foldOpen(e){
				// console.log('open',e)
			},
			confirmOk() {
				this.successShow = false;
			},
			synthesisCollection(item) {
				if (!this.synthesisCollectionFlag) return false
				if (item.isEnabled != 1) {
					uni.showToast({
						title:'暂不能合成',
						icon:'none'
					})
					return false
				}
				this.synthesisCollectionFlag = false;
				this.$api.getUpgrade({cardId:item.cardId}).then(res => {
					console.log(res)
					this.synthesisCollectionFlag = true;
					if (res.code == 200) {
						this.successShow = true;
						this.getCardList();
					}
				})
			},
			getCardList() {
				this.$api.getCardList().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.list = res.data.cardList;
					}
				})
			},
			toDetail(itm) {
				uni.navigateTo({
					url:`/pages/collectionDetail/collectionDetail?collectionId=${itm.collectionId}`
				})
			}
		}
	}
</script>

<style lang="less">

	
	.mySynthesis{
		width: 100%;
		min-height: 100vh;
		background: #16181D;
		display: flow-root;
	}
	.mySynthesis-main{
		width: 100%;
		min-height: 100%;
		margin: 0 auto;
		background: #16181D;
		.mySyn-ul{
			width: 686rpx;
			margin: 0 auto;
			min-height: 100%;
			/deep/.u-cell--clickable{
				background-color: rgba(0,0,0,0);
			}
			.mySyn-ul-box{
				// background: #262A34;
				width: 100%;
				display: flex;
				.mySyn-ul-box-img{
					border-radius: 10px;
					width: 100rpx;
					height: 100rpx;
				}
				.mySyn-ul-box-wenzi{
					width: 400rpx;
					margin-left: 32rpx;
					.mySyn-ul-box-wenzi-t{
						width: 300rpx;
						height: 56rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
					}
					.mySyn-ul-box-wenzi-b{
						width: 400rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
						font-weight: 400;	
						color: #5D5F7A;
						line-height: 40rpx;
					}
				}	
			}
		}
	}
	
	// 每一个列表的背景颜色
	.mySynthesis_bg{
		width: 686rpx;
		border-radius: 20px;
		background: #262A34;
		margin-top: 32rpx;
	}
	// 所需藏品标题样式
	.mySyn-ul-li-title{
		height: 40rpx;
		width: 300rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5D5F7A;
		line-height: 40rpx;
		margin-bottom: 18rpx;
	}
	// 确认合成按钮
	.mySyn-ul-li-anniu{
		width: 100%;
		height: 88rpx;
		margin: 14rpx 0 20rpx;
		.mySyn-ul-li-anniu-btn{
			margin: 0 auto;
			width: 462rpx;
			height: 88rpx;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 25px;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
		.btn_wu{
			opacity: 0.4;
		}
	}
	.mySyn-ul-li{
		margin-bottom: 36rpx;
		width: 100%;
		display: flex;
		.mySyn-ul-li-box{
			width: 100%;
			display: flex;
			.mySyn-ul-li-img{
				border-radius: 10px;
				width: 100rpx;
				height: 100rpx;
			}
			.mySyn-ul-li-wenzi{
				width: 420rpx;
				margin-left: 32rpx;
				.mySyn-ul-li-wenzi-t{
					width: 252rpx;
					height: 56rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
					margin-bottom: 4rpx;
				}
				.mySyn-ul-li-wenzi-b{
					width: 400rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #5D5F7A;
					line-height: 40rpx;
				}
			}
			.mySyn-ul-li-select{
				width: 56rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				display: flex;
				align-items: center;
				.mySyn-ul-li-select-null{
					width: 56rpx;
					height: 100rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9D7DFF;
					line-height: 100rpx;		
				}
				.mySyn-ul-li-select-more{
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}
	
	.flodPopup{
		width: 590rpx;
		height: 610rpx;
		// background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
		background: #262A34;
		border-radius: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.tipsPopup-icon{
			width: 200rpx;
			height: 200rpx;
			margin: 68rpx auto 24rpx;
			.tipsPopup-icon-img{
				width: 100%;
				height: 100%;
			}
		}
		.tipsPopup-title{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.tipsPopup-text{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			text-align: center;
			margin-top: 44rpx;
		}
		.tipsPopup-confirm{
			width: 328rpx;
			height: 88rpx;
			margin: 68rpx auto 0;
			border-radius: 45rpx;
			// background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
			// color: #6A47F1;
			color: #ffffff;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			line-height: 88rpx;
			text-align: center;
		}
		.cancel-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 40rpx;
			right: 48rpx;
		}
	}
</style>
